<template>
  <div id="actionShowPhone">
    <div class="toolbar">
      <ul>
        <li>关注</li>
        <li>热门</li>
        <li>作业</li>
        <li>作品</li>
        <li>生活</li>
        <li style="color: red;border-bottom: 1px solid red">
          活动
        </li>
      </ul>
    </div>
    <div class="container">
      <div class="container-img">
        <el-image
                v-if="phoneImg"
                :src="phoneImg"
                class="avatar"
                fit="cover"
                :onError="errorImg"
                @click="toDetailPages"
        />
        <el-image
                v-else
                :src="imgSrc"
                class="avatar"
                fit="cover"
                :onError="errorImg"
                @click="toDetailPages"
        />
        <span class="img-title">进行中</span>
      </div>
      <div class="container-footer">
        <div class="title">
          <span>{{ phoneName }}</span></br>
          <span style="color: #a09e9e;font-size: 12px;">xxxx-xx-xx至xxxx-xxxx</span>
        </div>
        <div class="btn">
          <span><a @click="toActivityPage">参与</a></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import defaultImg from "@assets/img/phoneActivity.png"
export default {
  name: "ActionShowPhone",
  msg: "",
  data() {
    return {}
  },
  computed:{
    ...mapState(['phoneName','phoneImg']),
    imgSrc(){
      return this.$store.phoneImg || defaultImg
    }
  },
  mounted() {},
  methods: {
    errorImg(){
      return 'this.src=' + require('@assets/img/phoneActivity.png')
    },
    toDetailPages(){
      this.$emit("changePhone","pageDetail")
    },
    toActivityPage(){
      this.$emit("changePhone","activityPages")
    }
  }
}
</script>

<style lang="less">
    #actionShowPhone {
        height: 100%;
        width: 100%;
        .toolbar{
            width: 100%;
            height: 25px;
        }
        .toolbar ul{
            margin: 0 auto;
            list-style: none;
            padding-left: 0px;
        }
        .toolbar ul li{
            text-decoration: none;
            font-size: 14px;
            color: #999c9e;
            float: left;
            margin-left: 13px;
        }
        .container{
            margin-top: 10px;
        }
        .container .container-img{
          position: relative;
          cursor: pointer;
          .avatar{
            width:100%;
            height:100px;
          }
        }
        .container .container-footer{
            margin-top: 10px;
            display: flex;
            justify-content: space-between;
            padding: 0 5px;
            .btn {
              flex: none;
            }
        }
        .container .container-footer .title span{
            font-size: 14px;
        }
        .container .container-footer .btn span{
            font-size: 14px;
            background-color: #0d8ddb;
            padding: 0 15px;
            height: 50px;
            color: white;
            cursor: pointer;
        }
        .img-title{
            position: absolute;
            width: 50px;
            height: 20px;
            background: red;
            right: 6px;
            top: 6px;
            color: white;
            font-size: 14px;
            text-align: center;
        }
    }
</style>
